<template>
	<div class="gis_wrap">
		<el-row class="GIS-container" v-loading="loading">
			<div class="ele_3">
				<div class="ele_3_inner" v-for="(item, index) in this.levelList" :key="index">
					<div class="title">{{ item.title }}</div>
					<div class="level" :class="levelBgColor(item.level)"></div>
					<div class="section">{{ item.section }}</div>
				</div>
			</div>
			<div class="ele_2">
				<table>
					<tr>
						<th>站点名称</th>
						<th>空气类别</th>
					</tr>
					<tr v-for="item in siteWqiList2" :key="item.value" v-if="showTabel">
						<td>{{ item.siteName }}</td>
						<td v-if="item.aqiHourLevelName">
							<span class="item_cir" :class="levelBgColor(item.aqiHourLevel)"></span> 
							{{ item.aqiHourLevelName }}
						</td>
						<td v-else="item.aqiHourLevelName">							
							无法计算
						</td>						
					</tr>
				</table>
			</div>
			<baidu-map @ready="handler" ref="map" class="map" :center="center" :zoom="zoom" @zoomend="zoomEnd" :scroll-wheel-zoom="true" :map-click="false" @moveend="moveEnd">
				<!-- 自定义控件-点位搜索 -->
				<bm-control anchor="BMAP_ANCHOR_TOP_RIGHT" :offset="{width: 40, height: 20}">
					<el-select size="medium" style="width: 250px;" filterable v-model="currentPointId">
						<el-option v-for="(item, index) in pointList" :key="index" :label="item.siteName" :value="item.siteId">
							<el-row style="font-size: 12px;padding:0 10px;">
								{{ item.siteName }}
							</el-row>
						</el-option>
					</el-select>
					<el-button icon="el-icon-search" size="medium" @click="focusPoint" type="primary" style="margin-left: 5px"></el-button>
					<div style="text-align: center;margin-top: 20px;display: flex;justify-content: center;">
						<img src="/img/system/close.png" alt="" style="display: block;" @click="showTabel=false" v-if="showTabel" />
						<img src="/img/system/open.png" alt="" style="display: block;" @click="showTabel=true" v-else/>
					</div>
				</bm-control>
				<bm-overview-map anchor="BMAP_ANCHOR_BOTTOM_RIGHT" :size="size" :isOpen="true"></bm-overview-map>
				<!-- 点位 -->
				<div v-for="(item, index) in pointList" :key="index">
					<!-- 正常图钉 level 1-->
					<bm-marker v-if="item.level===1  && item.stateCode === 1" :key="index" :icon="{
              url: '/img/bg/airq-tuding/icon_level_1.png',
               size: {width: 40, height: 40}
            }" :position="item.position" @mouseover="pointClick(item)"></bm-marker>
					<!-- 正常图钉 level 2-->
					<bm-marker v-else-if="item.level===2 && item.stateCode === 1" :key="index" :icon="{
              url: '/img/bg/airq-tuding/icon_level_2.png',
               size: {width: 40, height: 40}
            }" :position="item.position" @mouseover="pointClick(item)"></bm-marker>
					<!-- 正常图钉 level 3-->
					<bm-marker v-else-if="item.level===3  && item.stateCode === 1" :key="index" :icon="{
              url: '/img/bg/airq-tuding/icon_level_3.png',
              size: {width: 40, height: 40}
            }" :position="item.position" @mouseover="pointClick(item)"></bm-marker>
					<!-- 正常图钉 level 4-->
					<bm-marker v-else-if="item.level===4  && item.stateCode === 1" :key="index" :icon="{
              url: '/img/bg/airq-tuding/icon_level_4.png',
             size: {width: 40, height: 40}
            }" :position="item.position" @mouseover="pointClick(item)"></bm-marker>
					<!-- 正常图钉 level 5-->
					<bm-marker v-else-if="item.level===5  && item.stateCode === 1" :key="index" :icon="{
              url: '/img/bg/airq-tuding/icon_level_5.png',
             size: {width: 40, height: 40}
            }" :position="item.position" @mouseover="pointClick(item)"></bm-marker>
					<!-- 正常图钉 level 6-->
					<bm-marker v-else-if="item.level===6  && item.stateCode === 1" :key="index" :icon="{
              url: '/img/bg/airq-tuding/icon_level_6.png',
              size: {width: 40, height: 40}
            }" :position="item.position" @mouseover="pointClick(item)"></bm-marker>
					<!--离线图钉 -->
					<bm-marker v-else-if="item.stateCode === 2" :key="index" :icon="{
              url: '/img/bg/airq-tuding/icon_status.png',
              size: {width: 40, height: 40}
            }" :position="item.position" @mouseover="pointClick(item)"></bm-marker>
                    <!--无法计算图钉 -->
					<bm-marker v-else-if="item.level===-1  && item.stateCode === 1" :key="index" :icon="{
              url: '/img/bg/airq-tuding/icon_level_99.png',
              size: {width: 40, height: 40}
            }" :position="item.position" @mouseover="pointClick(item)"></bm-marker>            
					
				</div>
				<!-- 信息窗体 -->
				<bm-info-window :position="infoData.position" :title="infoData.siteName+'-'+infoData.deviceName" :show="infoShow" :offset="{width: 0, height: -20}" :closeOnClick="false" @clickclose="withInfoClose">
					<!--修改-->
					<div class="info-wrapper" @click="toHistory" style="cursor: pointer;" v-if="infoData.factorList">
						<div class="info-main" :style="infoData.factorList.length>2?'width:540px':'width:360px'">
							<div class="info-main-left">
								<div class="left">
									<div class="aqi-title" :class="levelColor(infoData.level)">AQI</div>
									<div class="aqi-txt">{{ infoData.aqiVal }}</div>
								</div>
								<div class="right">
									<div class="right-inner" v-for="(item, index) in infoData.factorList1" :key="index">
										<div class="factor-title" style="display: flex;align-items: center;justify-content: center;">{{ item.alias }}({{ item.unit }})</div>
										<div class="factor-txt">{{ item.collectValue || '-' }}</div>
									</div>
								</div>
							</div>
							<div class="info-main-right">
								<div class="right" v-if="infoData.factorList2.length>0">
									<div class="right-inner" v-for="(item, index) in infoData.factorList2" :key="index">
										<div class="factor-title">{{ item.alias }}({{ item.unit }})</div>
										<div class="factor-txt">{{ item.collectValue || '-' }}</div>
									</div>
								</div>
							</div>
						</div>
						<div class="info-time">更新于：{{ infoData.collectTime }}</div>
					</div>
				</bm-info-window>

			</baidu-map>

			<!-- 数字统计 -->
			<div class="overlay_top" v-if="false">
				<div class="count_wrapper">
					<div class="count_item">
						<div class="count_label">I类</div>
						<div class="count_value">
							<div class="number_cell">0</div>
							<div class="number_cell">0</div>
							<div class="number_cell">0</div>
						</div>
					</div>
					<div class="count_item">
						<div class="count_label">II类</div>
						<div class="count_value">
							<div class="number_cell">0</div>
							<div class="number_cell">0</div>
							<div class="number_cell">0</div>
						</div>
					</div>
					<div class="count_item">
						<div class="count_label">III类</div>
						<div class="count_value">
							<div class="number_cell">0</div>
							<div class="number_cell">0</div>
							<div class="number_cell">0</div>
						</div>
					</div>
					<div class="count_item">
						<div class="count_label">IV类</div>
						<div class="count_value">
							<div class="number_cell">0</div>
							<div class="number_cell">0</div>
							<div class="number_cell">0</div>
						</div>
					</div>
					<div class="count_item">
						<div class="count_label">V类</div>
						<div class="count_value">
							<div class="number_cell">0</div>
							<div class="number_cell">0</div>
							<div class="number_cell">0</div>
						</div>
					</div>
				</div>
			</div>
		</el-row>
	</div>
</template>

<script>
	import { getGISData, getSiteWqi } from "@/api/airq/gis";
	import { mapGetters } from "vuex";
	import { setStore, getStore } from '@/util/store'
    import { getSystemConfig} from "@/api/ficm/systemName";
	export default {

		data() {
			return {
				showTabel:true,
				size: {
					width: 300,
					height: 180
				},
				center: '',
				zoom: '11',
				pointList: [], // 点位数组，用于渲染到地图
				infoData: {}, //  信息窗体数据
				infoShow: false, // 信息窗体显隐
				currentPointId: null, // 当前选择的点位
				dialogTitle: null, // 弹框标题
				videoVisible: false, // 弹框显隐
				loading: false,
				siteWqiList: [],
				siteWqiList2: [],
				isShow: true,
				levelList: [{
						title: '优',
						level: 1,
						section: '0~50'
					},
					{
						title: '良',
						level: 2,
						section: '51~100'
					},
					{
						title: '轻度',
						level: 3,
						section: '101~150'
					},
					{
						title: '中度',
						level: 4,
						section: '151~200'
					},
					{
						title: '重度',
						level: 5,
						section: '201~300'
					},
					{
						title: '严重',
						level: 6,
						section: '>300'
					},
					{
						title: '无',
						level: 99,
						section: ''
					}					
				]

			};
		},
		computed: {
			/** level  等级**/
			levelBgColor() {
				return function(level) {
					return 'level_bg_' + level
				}
			},
			/** level 等级**/
			levelColor() {
				return function(level) {
					return 'level_' + level
				}
			},
		},
		methods: {
			// 聚焦到选择的点位
			focusPoint() {

				if(this.currentPointId != 'all') {
					let status = false
					this.siteWqiList2 = [];
					this.pointList.forEach(item => {
						if(item.siteId == this.currentPointId) {
							this.pointClick(item) // 打开信息窗口
							this.center = item.position // 设置中心点
							status = true
						}
					})
					if(!status) {
						this.center = '无锡'
					}
					this.siteWqiList.forEach(item => {
						if(item.siteId == this.currentPointId) {
							this.siteWqiList2.push(item)
						}
					})
				} else {
					// this.$message.info('请先选择点位')
					this.withInfoClose()
					this.center = this.pointList[1].position
					this.siteWqiList2 = this.siteWqiList
				}
			},
			async handler() {
				this.loading = true
				getSystemConfig().then(res=>{
					if(res.data.data.zoomLevel){
						this.zoom=res.data.data.zoomLevel
					}else{
						this.zoom=11
					}
				})					
				await getSiteWqi().then(res => {
					if(res.data.success) {
						this.siteWqiList = res.data.data;
						Object.assign(this.siteWqiList2, this.siteWqiList);
					} else {
						reject('网络拥堵，请退出重试')
					}
				})
				this.getMapData().then(resData => {
					this.pointList = []
					resData.forEach(item => {
						this.siteWqiList.forEach(item2 => {
							if(item2.siteId == item.siteId) {
								this.pointList.push({
									siteId: item.siteId, //站点id
									deptInfoId: item.deptInfoId,
									siteName: item.siteName, //站点名称
									deviceName: item.deviceName, //设备名称
									position: {
										lng: item.logitude,
										lat: item.latitude
									},
									state: item.state, //使用状态 在用 断线
									stateCode: item.stateCode, //使用状态 1 在线 0 断线
									level: item.level, //AQI 质量等级,
									aqiVal: item.aqiVal == -1 ? '' : item.aqiVal, //AQI 值
									collectTime: item.collectTime, //更新时间
									factorList: item.factorList,
									aqiHourLevel: item2.aqiHourLevel
								})
							}
						})

					})
					this.loading = false
					// 在第一项添加 全部
					this.pointList.splice(0, 0, {
						siteName: '全部',
						siteId: 'all',
					});
					this.currentPointId = this.pointList[0].siteId
					this.focusPoint()
				}, error => {
					this.loading = false
				})
			},
			formatFactorList(arr) {
				if(arr) {
					let status = true
					for(var i = 0; i < arr.length; i++) {
						if(arr[i].isAbnormal > 0) {
							status = false
							break;
						}
					}
					return status
				}
			},
			/**
			 * 获取当前缩放比
			 */
			zoomEnd({
				target
			}) {
				this.zoom = target.getZoom()
			},
			/**
			 * 地图拖拽结束后触发
			 */
			moveEnd({
				target
			}) {
				// 重新定位中心点，解决同一个点位在拖拽后无法再次定位的问题
				this.center = target.getCenter()
			},
			/**
			 * 跳转
			 */
			toHistory() {
				this.$store.commit('SET_GISID', {
					value: this.infoData.siteId
				})
				this.$router.push({
					path: '/airq/history/historydata'
				})
			},
			/**
			 * 请求地图数据
			 */
			getMapData() {
				return new Promise((resolve, reject) => {
					getGISData().then(res => {
						if(res.data.success) {
							resolve(res.data.data)
						} else {
							reject('网络拥堵，请退出重试')
						}
					})
				})
			},
			/**
			 * 显示监控
			 */
			showVideo(point) {
				this.dialogTitle = point.siteName
				this.videoVisible = true
			},
			/**
			 * 点击信息窗口关闭按钮时触发
			 */
			withInfoClose() {
				// 把控制信息窗口显隐的变量置为false
				this.infoShow = false
			},
			/**
			 * 点击点位触发
			 */
			pointClick(point) {
				point['factorList1'] = []
				point['factorList2'] = []
				point.factorList.map(item => {
					if(item.alias == '温度' || item.alias == '湿度' || item.alias == '气压' || item.alias == '流速' || item.alias == '风向' || item.alias == '风速') {
						point['factorList2'].push(item)
					} else {
						point['factorList1'].push(item)
					}
				})
				// 展示信息窗口
				this.infoData = point
				this.infoShow = true
			},
		}
	}
</script>

<style lang="scss" scoped>
	.GIS-container {
		.ele_1 {
			position: absolute;
			bottom: 10px;
			left: 10px;
			z-index: 99;
			background: rgba($color: #FFF, $alpha: 0.7);
			padding: 5px 0;
			span {
				display: block;
				border-radius: 5px;
				color: #000;
				text-align: center;
				font-size: 13px;
				line-height: 20px;
				width: 40px;
				margin: 5px 10px;
			}
			span:first-child {
				background: #C5FFFF
			}
			span:nth-child(2) {
				background: #34C3F6
			}
			span:nth-child(3) {
				background: #03FF03
			}
			span:nth-child(4) {
				background: #FAFF19
			}
			span:nth-child(5) {
				background: #FF9000
			}
			span:nth-child(6) {
				background: #FF0000
			}
		}
		.ele_3 {
			position: absolute;
			bottom: 10px;
			left: 10px;
			z-index: 99;
			background: rgba($color: #FFF, $alpha: 0.7);
			padding: 5px 0;
			.ele_3_inner {
				display: flex;
				color: #000;
				text-align: center;
				font-size: 13px;
				align-items: center;
				color: #000;
				text-align: center;
				font-size: 13px;
				.title {
					display: block;
					border-radius: 5px;
					width: 30px;
					color: #000;
					text-align: center;
					margin-left: 10px;
					font-size: 13px;
				}
				.level {
					display: block;
					line-height: 20px;
					height: 30px;
					width: 5px;
					margin: 0 10px;
					text-indent: -99999px;
				}
			}
		}
		.ele_2 {
			position: absolute;
			right: 40px;
			top: 94px;
			z-index: 99;
			max-height: calc(100% - 290px);
			width: 310px;
			overflow: scroll;
			table {
				width: 100%;
				text-align: center;
				border: 1px solid #DCDFE6;
				font-size: 14px;
				border-bottom: none;
				background: rgba($color: #FFF, $alpha: 0.7);
				th,
				td {
					font-weight: normal;
					height: 30px;
					;
					border-bottom: 1px dashed #DCDFE6
				}
				.item_cir {
					width: 10px;
					height: 10px;
					border-radius: 50%;
					display: inline-block;
				}
			}
		}
		height: calc(100% - 40px);
		padding: 0 !important;
		.map {
			height: 100%;
			.info_item {
				display: flex;
				font-size: 14px;
				margin: 5px 0;
				.state_online {
					color: #009e00;
				}
				.state_offline {
					color: #8a8a8a;
				}
			}
		}
		.dialog-video {
			width: 100%;
		}
		.overlay_top {
			position: absolute;
			top: 10px;
			width: 100%;
			display: flex;
			justify-content: center;
			.count_wrapper {
				display: flex;
				.count_item {
					width: 20%;
					height: 100%;
					margin: 0 10px;
					.count_label {
						font-size: 25px;
						height: 40px;
						text-align: center;
					}
					.count_value {
						display: flex;
						.number_cell {
							margin: 0 5px;
							padding: 2px 5px;
							font-size: 35px;
							border-radius: 5px;
							background: rgba(170, 170, 170, 0.4);
						}
					}
				}
			}
		}
	}
	/*修改*/
	
	.info-wrapper {
		display: flex;
		flex-direction: column;
		.info-main {
			display: flex;
			flex-direction: row;
			margin: 10px 0;
			.info-main-left {
				display: flex;
				flex-direction: row;
				width: 70%;
				position: relative;
				.left {
					width: 60px;
					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: center;
					border: 1px solid #ddd;
					border-radius: 4px 0 0 4px;
					background: #f5f5f5;
					.aqi-title {
						font-weight: bold;
						font-size: 16px;
						border-radius: 0 !important;
					}
					.aqi-txt {
						margin-top: 10px;
						border-radius: 0 !important;
					}
				}
				.right {
					flex: 1;
					display: flex;
					flex-direction: row;
					flex-wrap: wrap;
					border-top: 1px solid #ddd;
					font-size: 13px;
					background: #f5f5f5;
					.right-inner {
						display: flex;
						flex-direction: column;
						width: 33.3%;
						.factor-title {
							color: #666;
							border-bottom: 1px solid #ddd;
							border-right: 1px solid #ddd;
							box-sizing: border-box;
							padding: 10px 0;
							height: 50px;
							text-align: center;
							border-radius: 0 !important;
							font-size: 12px;
						}
						.factor-txt {
							border-bottom: 1px solid #ddd;
							border-right: 1px solid #ddd;
							box-sizing: border-box;
							padding: 10px 0;
							height: 40px;
							text-align: center;
							border-radius: 0 !important;
						}
					}
				}
			}
			.info-main-right {
				width: 30%;
				display: flex;
				flex-direction: row;
				margin-left: 10px;
				.right {
					border-top: 1px solid #ddd;
					border-left: 1px solid #ddd;
					border-radius: 4px !important;
					//flex: 1;
					display: flex;
					flex-direction: row;
					flex-wrap: wrap;
					border-top: 1px solid #ddd;
					font-size: 13px;
					background: #f5f5f5;
					.right-inner {
						display: flex;
						flex-direction: column;
						width: 33.3%;
						.factor-title {
							color: #666;
							border-bottom: 1px solid #ddd;
							border-right: 1px solid #ddd;
							box-sizing: border-box;
							padding: 10px;
							height: 50px;
							text-align: center;
							border-radius: 0 !important;
							font-size: 12px;
						}
						.factor-txt {
							border-bottom: 1px solid #ddd;
							border-right: 1px solid #ddd;
							box-sizing: border-box;
							padding: 10px 0;
							height: 40px;
							text-align: center;
							border-radius: 0 !important;
						}
					}
					.right-inner:last-child {
						box-sizing: border-box;
					}
				}
			}
		}
		.info-time {
			text-align: right;
			font-size: 13px;
			color: #666
		}
	}
	
	.spread {
		width: 100%;
		height: 40px;
		line-height: 40px;
		text-align: right;
		color: blue;
		font-size: 12px;
		position: absolute;
		right: 0;
		top: -40px;
	}
</style>
<style lang="scss" scoped>
	.level_bg_0 {
		background: #ddd
	}
	
	.level_bg_1 {
		background: $colorGreen
	}
	
	.level_bg_2 {
		background: $colorYellow
	}
	
	.level_bg_3 {
		background: $colorOrange
	}
	
	.level_bg_4 {
		background: $colorRed
	}
	
	.level_bg_5 {
		background: $colorPurple
	}
	
	.level_bg_6 {
		background: $colorBrown
	}
	.level_bg_99 {
		background: #000
	}		
	.level_1 {
		color: $colorGreen
	}
	
	.level_2 {
		color: $colorYellow
	}
	
	.level_3 {
		color: $colorOrange
	}
	
	.level_4 {
		color: $colorRed
	}
	
	.level_5 {
		color: $colorPurple
	}
	
	.level_6 {
		color: $colorBrown
	}

</style>